/*
 * @Date: 2022-01-15 19:54:48
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-15 22:28:43
 * @FilePath: /react-hmmm/src/pages/Login/index.js
 */
import React, { Component } from 'react'
import styles from './index.module.scss'
import { Card, Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
// 1 在 index.js 中导入 antd 的样式文件
import { login } from 'api/Login'
import { setToken } from 'utils/storage'
import sha256 from 'crypto-js/sha256'
export default class Login extends Component {
  render() {
    // ~ 提交表单且数据验证成功后回调事件
    const onFinish = async e => {
      const password = sha256(e.password).toString()
      const username = e.username
      try {
        const res = await login(username, password)
        console.log(res)
        setToken(res.token)
      } catch (error) {
        console.log(error)
      }
    }
    // ~ 	提交表单且数据验证失败后回调事件
    const onFinishFailed = () => {}
    return (
      <div className={styles.login}>
        {/* // ~登录大盒子 */}
        <div className="loginBox">
          {/* // ~登录内容 */}
          <div className="loginContent">
            {/* // ~登录表头 */}
            <div className="loginTitle">
              <div className="loginLogo"></div>
              <span>用户登录</span>
            </div>
            {/* // ~ Form表单 */}

            <div className="loginForm">
              <Form
                size="large"
                name="basic"
                validateTrigger={['onBlur', 'onChange']}
                initialValues={{
                  username: 'root@admin.com',
                  password: '123456'
                }}
                autoComplete="off"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
              >
                <Form.Item
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名'
                    },
                    {
                      pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                      message: '邮箱格式不正确'
                    }
                  ]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="Username"
                  />
                </Form.Item>

                <Form.Item
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码'
                    },
                    {
                      pattern: /^[0-9]{6}$/,
                      message: '密码格式不正确'
                    }
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                  />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit" block>
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
